<template>
	<view>
		<view v-if="isJoin === 1 && (bargainStatus == 0||bargainStatus == 3)">
			<view class="grouponTitle grouponPB">
				<view class="grouponWord1">拼团还没成功</view>
				<view class="grouponWord2">快叫小伙伴们一起拼团吧</view>
			</view>
			<view class="grouponTitle mt grouponBB">
				<span class="countDown">剩余</span>
				<view class="countDownView">
					<tui-countdown backgroundColor="#000000" color="#ffffff" msColor="#ffff00" width="60" height="60" :time="time" isMs></tui-countdown>
				</view>
				<span class="countDown">结束</span>
			</view>
			<view class="grouponTitle grouponNum">
				共
				<span class="peopleNum">{{ peopleNum }}</span>
				人参团，点击右上角发送给朋友
			</view>
			<view class="grouponTitle" style="padding-bottom: 1rpx;">
				<view class="grouponWord1">拼团进度</view>
				<view class="grouponInfo">
					<view class="grouponContent">
						<span>{{ memberLimit }}</span>
						人拼团
					</view>
					<hr class="grouponHr" />
					<view class="grouponContent">
						￥
						<span>{{ price }}</span>
						/件
					</view>
				</view>
			</view>
			<view class="grouponTitle grouponBB">
				<view class="userList">
					<view class="userImg" v-for="(item, index) in userInfo" :key="index">
						<image :src="item.headimgurl" class="tui-avatar" style="border-color:#e96d71 ;" v-if="item.isCap === 1"></image>
						<image :src="item.headimgurl" class="tui-avatar" v-else></image>
						<view class="cap" v-if="item.isCap === 1">团长</view>
						<view>{{ item.nickName }}</view>
					</view>
				</view>
			</view>
			<view class="shareBotton">
				<mix-button :disabled="uploadImg" text="邀请好友参团" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="share()"></mix-button>
			</view>
			<view class="grouponTitle grouponBB" style="padding: 20rpx 34rpx;color: #333333;" @tap="explain()">
				查看拼团活动说明
				<text class="iconfont iconxiangyou rightStyle"></text>
			</view>
			<view class="grouponTitle grouponBB">
				<tui-list-cell>
					<view class="tui-padding tui-flex" @click="goProduct()">
						<view>商品名称</view>
						<view>
							<span class="tui-size-26" style="color: #E96D71;">{{ productName }}</span>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell>
					<view class="tui-padding tui-flex">
						<view>拼团时间</view>
						<view>
							<span class="tui-size-26">{{ startDate }}</span>
						</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
		<view v-else-if="isJoin === 0 || bargainStatus == 1 || bargainStatus == 2">
			<view style="background-color: #FFFFFF;padding: 10rpx;" @tap="goProduct()">
				<view class="productImg"><image :src="imgSrc + productThumbnailImageHdUrl" class="tui-goods-img" /></view>
				<view class="productInfo">
					<view class="productInfoTitle" style="">{{ productName }}</view>
					<view class="productInfoWord" style="margin-bottom: 10rpx;">累计销售{{ productSalesCount }}件</view>
					<view class="productInfoWord">
						当前价格:￥
						<span class="tui-icon-red">{{ price }}</span>
					</view>
					<view class="productInfoWord">
						当前拼团人数
						<span class="tui-icon-red">{{ peopleNum }}</span>
						人
						<view class="productSale tui-icon-red">拼团立省:￥{{ saleAmount|moneyFormat(saleAmount) }}</view>
					</view>
				</view>
			</view>
			<view class="grouponTitle mt grouponBB" v-if="bargainStatus != 1 && bargainStatus != 2">
				<span class="countDown">剩余</span>
				<view class="countDownView">
					<tui-countdown backgroundColor="#000000" color="#ffffff" msColor="#ffff00" width="60" height="60" :time="time" isMs></tui-countdown>
				</view>
				<span class="countDown">结束</span>
			</view>
			<view class="grouponTitle grouponNum" v-if="bargainStatus != 1 && bargainStatus != 2">
				共
				<span class="peopleNum">{{ peopleNum }}</span>
				人参团，点击右上角发送给朋友
			</view>
			<view class="grouponTitle" style="padding-bottom: 1rpx;">
				<view class="grouponWord1">拼团进度</view>
				<view class="grouponInfo">
					<view class="grouponContent">
						<span>{{ memberLimit }}</span>
						人拼团
					</view>
					<hr class="grouponHr" />
					<view class="grouponContent">
						￥
						<span>{{ price }}</span>
						/件
					</view>
				</view>
			</view>
			<view class="tui-coupon-info">
				<view class="tui-list-cell" @tap="togglePopup1()">
					<!-- <view class="couponicon">领券</view> -->
					<view class="couponReduce">
						<span class="iconfont icon7tiantuihuanhuo tui-icon-red"></span>
						7天退换
					</view>
					<view class="couponReduce">
						<span class="iconfont iconfahuo tui-icon-red"></span>
						72小时内发货
					</view>
					<!-- <view class="couponReduce" v-if="goodData.productDeliveryTime==='TwoDays'"><span class="iconfont iconfahuo"></span>48小时内发货</view>
				<view class="couponReduce" v-if="goodData.productDeliveryTime==='ThreeDays'"><span class="iconfont iconfahuo"></span>72小时内发货</view> -->
					<view class="couponReduce">
						<span class="iconfont iconpei tui-icon-red"></span>
						假一赔十
					</view>
					<view class="tui-ml-auto"><view class="iconfont iconxiangyou"></view></view>
				</view>
			</view>
			<view class="grouponTitle grouponBB">
				<view class="userList">
					<view class="userImg" v-for="(item, index) in userInfo" :key="index">
						<image :src="item.headimgurl" class="tui-avatar" style="width: 124rpx;height: 124rpx;" v-if="item.isCap === 1"></image>
						<image :src="item.headimgurl" class="tui-avatar" style="width: 124rpx;height: 124rpx;" v-else></image>
						<view class="cap" v-if="item.isCap === 1">团长</view>
						<view style="width: 124rpx;">{{ item.nickName }}</view>
					</view>
				</view>
			</view>
			<view class="shareBotton" v-if="bargainStatus == 1 || bargainStatus == 2">
				<mix-button :disabled="uploadImg" text="再次一键拼团" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="goProduct()"></mix-button>
			</view>
			<view class="shareBotton" v-else-if="bargainStatus == 0">
				<mix-button :disabled="uploadImg" text="一键参团" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="joinGroupon()"></mix-button>
			</view>
			<view class="grouponTitle grouponBB" style="padding: 20rpx 34rpx; color: #333333;" @tap="explain()">
				查看拼团活动说明
				<text class="iconfont iconxiangyou rightStyle"></text>
			</view>
			<view class="grouponTitle grouponBB">
				<tui-list-cell>
					<view class="tui-padding tui-flex" @click="goProduct()">
						<view>商品名称</view>
						<view>
							<span class="tui-size-26" style="color: #E96D71;">{{ productName }}</span>
							<text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-padding tui-flex">
						<view>拼团时间</view>
						<view>
							<span class="tui-size-26">{{ startDate }}</span>
						</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<uni-popup :show="couponShow" type="bottom" :custom="true" @change="unipopupFun">
			<view class="uni-tip-box">
				<view class="uni-tip-title">
					服务说明
					<i class="iconfont iconguanbi  couponClose" style="font-size:20px" @tap="closePopup"></i>
				</view>
				<view class="couponContent">
					<view class="couponService">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">七天退换</view>
							<view class="couponIntroduce">商家承诺7天无理由退换货</view>
						</view>
					</view>
					<view class="couponService">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">72小时内发货</view>
							<view class="couponIntroduce">购买后，商家将在72小时内发货</view>
						</view>
					</view>
					<view class="couponService">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">假一赔十</view>
							<view class="couponIntroduce">若收到商品是假货，可获得加倍赔偿</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="sharePopup" type="center" :custom="true" @change="sharePopupFun">
			<view><image class="shareImgTop" src="../../static/img/share.png" mode=""></image></view>
			<view class="shareWord">
				<view class="grouponNum" style="color: #FFFFFF;">
					共
					<span class="peopleNum">1</span>
					人参团，点击右上角发送给朋友
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="explainPopup" type="center" :custom="true" @change="explainPopupFun">
			<view class="explainView">
				<view class="explainTitle">拼团活动说明</view>
				<view class="explainWord">
					<image class="point" src="../../static/img/point.png" mode=""></image>
					{{memberLimit|toChinesNum(memberLimit)}}人即可成团，成团方式您可以选择“我要开团”或者“去参团”。
				</view>
				<view class="explainWord">
					<image class="point" src="../../static/img/point.png" mode=""></image>
					请在下单后的24小时内，邀请好友完成拼团
				</view>
				<view class="explainWord">
					<image class="point" src="../../static/img/point.png" mode=""></image>
					当您选择“我要开团”开启新的团购，需要支付相关订单费用，若果24小时内无他人参团，系统将自动退化您已支付的费用
				</view>
				<view class="explainWord">
					<image class="point" src="../../static/img/point.png" mode=""></image>
					当您选择“去参团”请尽快完成支付，订单费用支付完成，即可拼团成功
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="share" :show="shareShow" :type="'bottom'" :custom="true" @change="unishareFun">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view class="uni-share-content-box" @tap="shareFun('WXSceneSession')">
						<view class="uni-share-content-image"><view class="iconfont iconweixin shareImg shareWeixinIcon"></view></view>
						<view class="uni-share-content-text">微信好友</view>
					</view>
					<view class="uni-share-content-box" @tap="shareFun('WXSenceTimeline')">
						<view class="uni-share-content-image"><view class="iconfont shareImg iconpengyouquan shareQuanIcon"></view></view>
						<view class="uni-share-content-text">朋友圈</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel()">取消分享</view>
			</view>
		</uni-popup>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
import tuiCountdown from '@/packageB/components/tui-countdown/tui-countdown.vue';
import mixin from '@/utils/mixin.js';
import mixButton from '@/components/mix-button/mix-button.vue';
import mixEmpty from '@/components/mix-empty/mix-empty.vue';
import tuiListCell from '@/components/list-cell/list-cell';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	mixins: [mixin],
	components: {
		tuiCountdown,
		mixEmpty,
		mixButton,
		tuiListCell,
		uniPopup
	},
	data() {
		return {
			imgSrc: this.$store.state.imgUrl,
			couponShow: false,
			sharePopup: false,
			explainPopup: false,
			time: 86400,
			id: '11111',
			peopleNum: 0,
			memberLimit: 0,
			price: 0,
			productName: '',
			startDate: '',
			productSalesCount: 0,
			productThumbnailImageHdUrl: '',
			userInfo: [],
			isJoin: undefined,
			productId: '',
			bargainStatus: 0,
			shareShow: false,
			saleAmount: 0
		};
	},
	onLoad(options) {
		if (!this.$util.checkTokenAndInviterId(options)) {
			// 检查token和邀请人信息，无token退出方法
			return;
		}
		this.id = options.bargainId;
		this.getGrouponInfo();
	},
	onShareAppMessage(res) {
		return {
			title: this.productName,
			path: `packageB/pages/groupon/otherGroupon?bargainId=${this.id}` //(可携带参数)
		};
	},
	filters: {
		moneyFormat(value) {
			let unit = value.toFixed(2);
			return unit;
		},
		toChinesNum(num) {
			let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; //changeNum[0] = "零"
			let unit = ['', '十', '百', '千', '万'];
			num = parseInt(num);
			let getWan = temp => {
				let strArr = temp
					.toString()
					.split('')
					.reverse();
				let newNum = '';
				for (var i = 0; i < strArr.length; i++) {
					newNum =
						(i == 0 && strArr[i] == 0 ? '' : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? '' : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
				}
				return newNum;
			};
			let overWan = Math.floor(num / 10000);
			let noWan = num % 10000;
			if (noWan.toString().length < 4) noWan = '0' + noWan;
			return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num);
		}
	},

	methods: {
		unishareFun(e) {
			console.log(e.show);
			this.shareShow = e.show;
		},

		//分享
		shareFun(type) {
			var shareHref = this.$util.shareUrl();

			uni.share({
				provider: 'weixin',
				scene: type,
				type: 0,
				title: this.productName,
				href: `${shareHref}packageB/pages/groupon/otherGroupon?bargainId=${this.id}`,
				imageUrl: this.imgSrc + this.productThumbnailImageHdUrl,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		goProduct() {
			this.$util.gotoGoodsDetail('productId', this.productId);
		},
		getGrouponInfo() {
			const params = {
				bargainId: this.id
			};
			this.$http.getGrouponDetail(params).then(res => {
				this.isJoin = res.data.isJoinBargain;
				this.time = this.getTimeRemain(res.data.bargainDetail[0].nowDate, res.data.bargainEndDate);
				this.peopleNum = res.data.memberNum;
				this.memberLimit = res.data.memberLimit;
				this.price = res.data.productLevelPriceData.productLevelPrice;
				this.productName = res.data.productName;
				this.startDate = res.data.bargainStartDate;
				this.productId = res.data.productId;
				this.productSalesCount = res.data.productSalesCount;
				this.productThumbnailImageHdUrl = res.data.productThumbnailImageHdUrl;
				this.bargainStatus = res.data.bargainStatus;
				this.saleAmount = res.data.productDiscountPrice - res.data.productLevelPriceData.productLevelPrice;
				res.data.bargainDetail.forEach((item, index) => {
					if (res.data.buyerId === item.createUser) {
						item.isCap = 1;
					}
					this.userInfo.push(item);
				});
			});
		},
		getTimeRemain(now, end) {
			const nowTime = this.getUnixTime(now);
			const endTime = this.getUnixTime(end);
			return endTime - nowTime;
		},
		getUnixTime(dateStr) {
			var newstr = dateStr.replace(/-/g, '/');
			var date = new Date(newstr);
			var time_str = date.getTime().toString();
			return parseInt(time_str.substr(0, 10));
		},
		unipopupFun(e) {
			this.couponShow = e.show;
		},
		sharePopupFun(e) {
			this.sharePopup = e.show;
		},
		explainPopupFun(e) {
			this.explainPopup = e.show;
		},
		togglePopup1() {
			this.couponShow = true;
		},
		closePopup() {
			this.couponShow = false;
		},
		cancel() {
			this.shareShow = false;
		},
		share() {
			// #ifndef APP-PLUS
			this.sharePopup = true;
			// #endif
			// #ifdef APP-PLUS
			this.shareShow = true;
			// #endif
		},
		joinGroupon() {
			// #ifdef H5
			if (this.$wechat.isIOS()) {
				window.location.href = `/h5/packageA/pages/goodsDetails/goodsDetails?productId=${this.productId}&groupType=1&bargainId=${this.id}&share=1`
			} else {
				uni.navigateTo({
					url: `/packageA/pages/goodsDetails/goodsDetails?productId=${this.productId}&groupType=1&bargainId=${this.id}`
				})
			}
			// #endif
			// #ifndef H5
			uni.navigateTo({
				url: `/packageA/pages/goodsDetails/goodsDetails?productId=${this.productId}&groupType=1&bargainId=${this.id}`
			})
			// #endif
		},
		explain() {
			this.explainPopup = true;
		}
	}
};
</script>

<style lang="scss">
.countDownView {
	margin: 0 10px;
	display: inline-block;
}
.shareBotton {
	background-color: #ffffff;
	padding-bottom: 40rpx;
}
.cap {
	width: 50rpx;
	height: 30rpx;
	background-color: #e96d71;
	position: absolute;
	top: 0px;
	left: 100rpx;
	color: #ffffff;
	font-size: 20rpx;
}
.userImg {
	position: relative;
	display: inline-block;
	margin: 4px 15px 0px 0px;
	vertical-align: text-top;
}
.userList {
	margin-top: 0rpx;
	padding: 30rpx;
	width: 100%;
}
.explainView {
	background-color: #ffffff;
	padding: 30rpx 40rpx;
	margin: 0 auto;
	width: 90%;
	border-radius: 20rpx;
}
.explainTitle {
	font-size: 34rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40rpx;
}
.explainWord {
	margin: 10rpx 0;
	font-size: 26rpx;
	position: relative;
}
.point {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	left: -60rpx;
	top: -10px;
}
.shareImgTop {
	width: 263rpx;
	height: 200rpx;
	position: absolute;
	top: -560rpx;
	left: 400rpx;
}
.shareWord {
	position: relative;
	top: -208rpx;
}
.productInfoWord {
	color: #cfcfcf;
	font-size: 26rpx;
}
.productInfoTitle {
	color: #333;
	font-size: 28rpx;
	font-weight: bolder;
}
.tui-icon-red {
	color: #e96d71;
}
.tui-safe-area {
	height: 1rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
}
.mt {
	padding-top: 40rpx;
}
.grouponBB {
	margin-top: 8rpx;
}
.grouponPB {
	padding-bottom: 90rpx;
}
.grouponTitle {
	text-align: center;
	color: #e96d71;
	background-color: #ffffff;
}
.grouponWord1 {
	font-size: 40rpx;
	font-weight: bolder;
	padding-top: 60rpx;
}
.productImg {
	display: inline-block;
	width: 30%;
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
}
.productSale {
	display: inline-block;
	width: 40%;
	display: inline-block;
	float: right;
}
.productInfo {
	display: inline-block;
	width: 70%;
	padding-top: 10rpx;
	padding-left: 10rpx;
	line-height: 50rpx;
}
.countDown {
	color: #333;
	font-size: 40rpx;
	font-weight: bolder;
}
.grouponNum {
	color: #333;
	font-size: 42rpx;
	font-weight: bolder;
	text-align: center;
	padding-top: 10rpx;
}
.peopleNum {
	color: #e96d71;
}
.grouponInfo {
	background-color: #e96d71;
	color: #ffffff;
	text-align: center;
	width: 160rpx;
	height: 100rpx;
	margin: 20px auto;
	border-radius: 10px;
	font-size: 28rpx;
}
.grouponHr {
	height: 1px;
	background-color: #ffffff;
	width: 90%;
	margin: 0 auto;
}
.grouponContent {
	padding: 5rpx 0;
}
.tui-padding {
	box-sizing: border-box;
}
.tui-flex {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 26rpx;
}
.rightStyle {
	float: right;
	color: #333333;
	margin-top: 10rpx;
}
.tui-coupon-info {
	background: #fff;
	// border-radius: 24rpx;
	margin-top: 10rpx;
	overflow: hidden;

	.coupinContent {
		border-top: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
		margin: 0 30rpx 20rpx 30rpx;
		padding-top: 20rpx;

		.imgClass {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.skuNum {
			font-size: 24rpx;
			background-color: #bdbdbd;
			border-radius: 20rpx;
			padding: 10rpx 15rpx;
		}
	}
	.groupContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f2f2f2;
		margin: 0 30rpx 20rpx 30rpx;
		padding-top: 20rpx;

		.groupUser {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.imgClass {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.countdownBox {
				display: flex;
				align-items: center;

				.grouoNumber {
					margin-right: 20rpx;
				}
			}
		}

		.groupButton {
			background-image: linear-gradient(to right, #fe356c, #fc5f66);
			border-radius: 10rpx;
			padding: 5rpx 20rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}
	.evaluateContent {
		// display: flex;
		// align-items: center;
		border-top: 1px solid #f2f2f2;
		margin: 0 30rpx 20rpx 30rpx;
		padding-top: 20rpx;

		.evaluateUser {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.imgClass {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}
		}

		.evaluateData {
			padding-left: 20rpx;
			font-size: 28rpx;
		}
	}

	.freightBox {
		width: 100%;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		// .freightIcon {
		// 	color: #E94732;
		// }

		.freightWord {
			padding: 10rpx;
			line-height: 35rpx;
		}
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		// .couponicon {
		// 	color: #fff;
		// 	background-color: red;
		// 	padding: 10rpx;

		// }
		.skuChoice {
			border-bottom: #ccc;
		}

		.couponReduce {
			// color: #E94732;
			font-size: 24rpx;
			margin-right: 20rpx;
			// border: 1px solid #e94732;
			padding: 5rpx;
			border-radius: 10rpx;

			.iconfont {
				// color: #E94732;
				margin-right: 15rpx;
			}
		}

		.tui-ml-auto {
			margin-left: auto;
		}
	}
}

.tui-list-cell {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	font-size: 26rpx;
	line-height: 26rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;

	.tui-cell-title {
		// font-weight: bold;
		// padding-right: 30rpx;
	}

	.tui-ml-auto {
		margin-left: auto;
	}
}
.couponReduce {
	// color: #E94732;
	font-size: 24rpx;
	margin-right: 20rpx;
	// border: 1px solid #e94732;
	padding: 5rpx;
	border-radius: 10rpx;

	.iconfont {
		// color: #E94732;
		margin-right: 15rpx;
	}
}
.uni-tip-box {
	padding: 15rpx;
	width: 100%;
	background: #fff;
	box-sizing: border-box;

	// border-radius: 20px 20rpx 0 0;
}
.uni-tip-title {
	// text-align: center;
	// font-weight: bold;
	font-size: 16px;
	color: #333;
	display: flex;
	justify-content: space-between;
	padding: 15rpx;
}
.couponContent {
	width: 100%;
	height: 500rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 9999;
	padding: 20rpx;

	.couponService {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 20rpx;

		.iconfont {
			// color: #E94732;
			margin-left: 60rpx;
			margin-top: 10rpx;
		}

		.couponWord {
			color: #666666;
			width: 80%;

			.couponTitle {
				color: #111;
				font-size: 32rpx;
				margin-bottom: 6rpx;
			}

			.couponIntroduce {
				font-size: 26rpx;
			}
		}
	}
}
.uni-share {
	background: #fff;
	.shareWeixinIcon {
		left: 90rpx;
	}
	.shareQuanIcon {
		right: 230rpx;
	}
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}

	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}

	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}

	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 60upx;
		// height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}

	.shareImg {
		color: #07c160;
		font-size: 60rpx;
	}

	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}

	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
}
</style>
